<!--
 * @Description  : 
 * @Author       : jiangxiaoying
 * @Date         : 2021-03-09 13:23:57
 * @LastEditTime : 2021-03-16 14:25:11
 * @LastEditors  : jiangxiaoying
 * @FilePath     : \cloud-components\docs\pages\components\cloud-tag\example3.vue
-->
<template>
  <div>
    <span :style="{ marginRight: 8 }">Categories:</span>
    <template v-for="tag in tags">
      <CloudCheckableTag
        :key="tag"
        :checked="selectedTags.indexOf(tag) > -1"
        @change="(checked) => handleChange(tag, checked)"
      >
        {{ tag }}
      </CloudCheckableTag>
    </template>
  </div>
</template>

<script>
  export default {
    title: '3.热门标签',
    subTitle: '选择你感兴趣的话题。',
    data () {
      return {
        tags: ['Movies', 'Books', 'Music', 'Sports'],
        selectedTags: []
      }
    },
    methods: {
      handleChange (tag, checked) {
        const { selectedTags } = this;
        const nextSelectedTags = checked
          ? [...selectedTags, tag]
          : selectedTags.filter(t => t !== tag);
        console.log('You are interested in: ', nextSelectedTags);
        this.selectedTags = nextSelectedTags;
      }
    }
  }
</script>

<style lang="scss">
</style>